<template>
  <div class="detail-container">
    <el-page-header
      :content="'【' + route.query.uName + '】的申请'"
      @back="goBack"
    />
    <el-descriptions border :column="2" title="详情">
      <el-descriptions-item>
        <template #label>联系电话</template>
        {{ route.query.uPhone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>真实姓名</template>
        {{ route.query.uName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>身份证号</template>
        {{ route.query.identificationNo }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>社区地址</template>
        {{ route.query.address }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>年收入</template>
        {{ route.query.yearSalary }} 元
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>性别</template>
        {{
          !route.query.uSex ? '未设置' : route.query.uSex == '1' ? '男' : '女'
        }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>身份证照片</template>
        <el-image
          :preview-src-list="[route.query.identificationImgUrl]"
          :src="route.query.identificationImgUrl"
          style="width: 100px; height: 100px"
        />
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>生活照片</template>
        <el-image
          :preview-src-list="[route.query.lifePhotoUrl]"
          :src="route.query.lifePhotoUrl"
          style="width: 100px; height: 100px"
        />
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>文件附件</template>
        <a :href="route.query.fileUrl">资料.zip（下载）</a>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>扶助状态</template>
        <el-tag v-if="route.query.status == 0" type="success">申请中</el-tag>
        <el-tag v-if="route.query.status == 1" type="warning">已通过</el-tag>
        <el-tag
          v-if="route.query.status == 2"
          style="
            background-color: #fa6567;
            color: #fff;
            border: 0px;
            font-size: 14px;
          "
        >
          已驳回
        </el-tag>
        <el-tag v-if="route.query.status == 3" type="info">已结束</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>发起时间</template>
        {{ route.query.createTime }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>处理时间</template>
        {{ route.query.handleTime ? route.query.handleTime : '/' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>结束时间</template>
        {{ route.query.destroyTime ? route.query.destroyTime : '/' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>备注（后台反馈）</template>
        {{ route.query.resultMsg ? route.query.resultMsg : '/' }}
      </el-descriptions-item>
    </el-descriptions>
    <div class="detail-info">
      <div class="detail-info-bar">简介</div>
      <div class="detail-info-desc">
        {{ route.query.desc ? route.query.desc : '/' }}
      </div>
    </div>
    <template v-if="route.query.status == 0">
      <el-input
        v-model="form.resultMsg"
        class="options"
        placeholder="若通过，可不填写此项。若驳回，请详细说明原因"
        :rows="2"
        type="textarea"
      />
      <div class="options">
        <el-button size="large" type="success" @click="toSubmit(true)">
          通过
        </el-button>
        <el-button
          size="large"
          style="
            background-color: #fa6567;
            color: #fff;
            border: 0px;
            font-size: 14px;
          "
          @click="toSubmit(false)"
        >
          驳回
        </el-button>
      </div>
    </template>

    <vab-json-viewer
      v-show="false"
      copyable
      :expand-depth="5"
      sort
      :value="route"
    />
  </div>
</template>

<script>
  import {
    defineComponent,
    getCurrentInstance,
    nextTick,
    reactive,
    toRefs,
  } from 'vue'
  import { useStore } from 'vuex'
  import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
  import { handleActivePath } from '@/utils/routes'
  import VabJsonViewer from '@/extra/VabJsonViewer'
  import { doRescuedoEdit } from '@/api/aid_user'

  export default defineComponent({
    name: 'Detail',
    components: { VabJsonViewer },
    setup() {
      const store = useStore()
      const route = useRoute()
      const router = useRouter()

      const { proxy } = getCurrentInstance()

      const changeTabsMeta = (options) =>
        store.dispatch('tabs/changeTabsMeta', options)
      const delVisitedRoute = (path) =>
        store.dispatch('tabs/delVisitedRoute', path)

      const state = reactive({
        route: { query: { title: '加载中' } },
        form: {
          resultMsg: '',
          status: null,
          id: null,
        },
        title: '加载中',
        imgList: [],
      })

      const goBack = async () => {
        const detailPath = await handleActivePath(route, true)
        await router.push({
          path: '/user/rescue',
          query: {
            needRefresh: true,
          },
        })
        await delVisitedRoute(detailPath)
      }

      onBeforeRouteLeave(async () => {
        const detailPath = await handleActivePath(route, true)
        await delVisitedRoute(detailPath)
      })

      const toSubmit = async (isPass) => {
        if (!isPass && !state.form.resultMsg) {
          proxy.$baseMessage('请填写拒绝原因', 'warning')
          return
        }
        state.form.id = state.route.query.id
        state.form.status = isPass ? 1 : 2
        const { msg } = await doRescuedoEdit(state.form)
        proxy.$baseMessage(msg, 'success', 'vab-hey-message-success')
        goBack()
      }

      nextTick(() => {
        changeTabsMeta({
          title: '详情页',
          meta: {
            title: `${route.query.title} 详情页`,
          },
        })
        state.title = route.query.title
        state.route = {
          path: route.path,
          params: route.params,
          query: route.query,
          name: route.name,
          meta: route.meta,
        }
      })

      const jsonData = {
        name: 'qiu', //字符串
        age: 18, //数组
        isMan: false, //布尔值
        date: new Date(),
        fn: () => {},
        arr: [1, 2, 5],
      }

      return {
        ...toRefs(state),
        goBack,
        jsonData,
        toSubmit,
      }
    },
    mounted() {
      this.imgList.push(this.$route.query.avatarUrl)
    },
  })
</script>
<style lang="scss">
  .detail-info {
    display: flex;
    border: 1px solid #676767;
    margin-top: 10px;
    padding: 10px;
    .detail-info-bar {
      width: 50px;
      letter-spacing: 5px;
      font-weight: bold;
    }
    .detail-info-desc {
      flex: 1;
      white-space: pre-wrap;
    }
  }

  .options {
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    .el-button {
      width: 100%;
    }
    .el-button:nth-child(1) {
      background: rgb(50, 151, 131);
    }
    .el-button:nth-child(2) {
      background: rgb(224, 22, 22);
    }
  }
</style>
